<template>
  <div class="monthlyReport-tab">
    <div class="tableBox">
      <el-table
        v-loading="tableLoading"
        :data="tableData"
        height="85vh"
        style="width: 100%"
        class="tableTh28"
        border
        stripe
        :span-method="arraySpanMethod"
        ref="table"
      >
        <el-table-column label="" prop="class2" class-name="first-title" width="100" fixed></el-table-column>
        <el-table-column label="" prop="verticalIndexName" class-name="second-title" width="110" fixed></el-table-column>
        <el-table-column label="单位" prop="unit" width="50" fixed></el-table-column>
       <el-table-column v-for="(item,index) in newArr" :key="index" :label="item" :prop="'val'+(index)">
        </el-table-column>
      </el-table>
    </div>

  </div>
</template>

<script>
import { mergeTableRow, mergeSpan } from "@/utils/mixin";
export default {
  name: "monthlyReport_tab1",
  props:{
      rowData:{
          type:Array,
          default:[]
      },
      colDefList:{
          type:Array,
          default:[]
      }
  },
  data() {
    return {
      spanArr: [],
      tableData: [],
         colList:[],
      newArr:[],
      tableLoading: false,
      flag:0
    };
  },
    watch:{
        rowData(val){
           this.tableData = this.rowData
        },
        colDefList(val){
          let colDef=[]
           this.colDefList[0].map((item,index)=>{
              colDef[index]=item.horizonIndexName
            })
            this.colList=colDef
             this.init()
        }
    },
  methods: {
    //table合并行
   arraySpanMethod({ row, column, rowIndex, columnIndex }) {
     if (columnIndex == 0 || columnIndex == 1 ) {
       return this.spanArr[rowIndex][columnIndex];
     }
   },
    init() {
        this.newArr=[];
        this.classify(
        this.colList
      );
     this.spanArr=mergeSpan(this.tableData, ["class2","verticalIndexName",])
        setTimeout(() => {
          this.$refs.table.doLayout();
        }, 1200);
    },
    classify(arr) {
      this.newArr=arr;

    }
  }
};
</script>

<style lang="scss" scoped>
.monthlyReport-tab .tableBox{
 /deep/ .first-title.is-leaf {
    position: relative;
    // font-size: 0!important;
    border-right: 1px solid #d7e5fb !important;
    // .cell {
    //   color: #d7e5fb;
    // }
  }
   /deep/ .second-title.is-leaf {
    overflow: visible;
    .cell {
      // transform: translateX(-100%);
      white-space: nowrap;
      overflow: visible;
    }
  }
}
</style>
